<template>
  <div>
    <ul>
      <li v-for="i in list" :key="i.id" @click="toVideo(i.id)">
        <div>
          <img v-lazy="i.imgurl16v9" alt="" />
          <span class="count"
            ><i class="el-icon-caret-right"></i>
            {{ getPlayCount(i.playCount) }}</span
          >
          <span class="time">{{getTime(i.duration)}}</span>
        </div>
        <div class="name">{{ i.name }}</div>
      </li>
    </ul>
     <div class="no" v-if="list.length==0">
       暂无数据
     </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  methods:{
     toVideo(id){
         
          this.$router.push({name:'playVideo',query:{vid:id}})
        
      }
  },
  computed: {
    getPlayCount() {
      return function (count) {
        if (count >= 10000) {
          count = parseInt(count / 10000);
          return count + "万";
        } else {
          return count;
        }
      };
    },
    getTime() {
      return function (time) {
        let min = Math.floor(time / 60000).toString()[1]
          ? Math.floor(time / 60000).toString()
          : "0" + Math.floor(time / 60000).toString();
        let sec = Math.floor(time % 60000)
          .toString()
          .slice(0, 2);
        return min + ":" + sec;
      };
    },
  },
  mounted() {
    this.$request({
      url: "/artist/mv",
      params: {
        id: this.$route.query.id,
        limit: 40,
      },
    }).then((success) => {
      this.list = success.data.mvs;
    });
  },
};
</script>

<style scoped>
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul li {
  position: relative;
  width: 230px;
  margin-bottom: 20px;
}
img {
  width: 235px;
  height: 132px;
  border-radius: 10px;
}
.name {
  padding: 10px 0;
}
.count {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
}
.time{
  position: absolute;
  right: 10px;
  top: 110px;
  color: white;

}
.no{
  color: gray;
  line-height: 2.5em;
}
</style>